<template>
  <ul>
    <li v-for="(item,parentindex) in skuobj.spec_attr_list" :key="parentindex">
      <div class="sku-name">{{item.spec_name}}</div>
      <div class="sku-attrs">
        <span
          @click="selectsku(parentindex,index)"
          :class="{ 'on': item.selected_prop_value === index}"
          v-for="(skuitem,index) in item.spec_val"
          :key="index"
        >{{skuitem}}</span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  data() {
    return {
      statusString: "", //拼接选中的状态
      spec_arr: [] //存放库存所有的sku的属性值[["黄色","红色"],["500nl","1000ml"],["非转基因压榨","转基因压榨"]]
    };
  },
  created() {
    this.iniSkuSelectStatus();
  },
  methods: {
    //获取到所有数据库存中有的选项，并拼接出一组二位数组[["黄色","红色"],["500nl","1000ml"],["非转基因压榨","转基因压榨"]]
    getSpecArr() {
      const storeskuarr = [];
      this.skuobj.sku_list.forEach((item, index) => {
        storeskuarr.push(this.skuobj.sku_list[index].spec_item.split(",")); //storeskuarr=[["黄色","500ml","转基因压榨"],["红色","1000ml","非转基因压榨"],["红色","1000ml","非转基因压榨"],["黄色","500ml","转基因压榨"]]
      });
      /*
      将二维数组[["黄色","500ml","转基因压榨"],["红色","1000ml","非转基因压榨"],["红色","1000ml","非转基因压榨"],["黄色","500ml","转基因压榨"]]
      将第一个元素的值取出来重新组合成一个新数组,变成如下：
      specs_arrs=[["黄色","红色","红色","黄色"],["500ml","1000nl","1000ml","500ml"],["转基因压榨","非转基因压榨","非转基因压榨","转基因压榨"]]
      */
      const specs_arrs = [];
      storeskuarr.forEach(item => {
        item.forEach((d, i) => {
          specs_arrs[i] = specs_arrs[i] || [];
          specs_arrs[i].push(d);
        });
      });
      /*
       将数组specs_arrs=[["黄色","红色","红色","黄色"],["500ml","1000nl","1000ml","500ml"],["转基因压榨","非转基因压榨","非转基因压榨","转基因压榨"]]去重变成如下
       spec_arr=[["黄色","红色"],["500nl","1000ml"],["非转基因压榨","转基因压榨"]]
       */
      specs_arrs.forEach((item, i) => {
        this.spec_arr.push(Array.from(new Set(item)));
      });
      return this.spec_arr;
    },
    //初始化sku的选中的状态
    iniSkuSelectStatus() {
      const initselectsku = this.skuobj.sku_list[0].spec_item.split(",");
      this.skuobj.spec_attr_list.forEach((spec_item, i) => {
        spec_item.spec_val.forEach((d, j) => {
          if (initselectsku[i] == d) {
            this.skuobj.spec_attr_list[i].selected_prop_value = j;
            this.splicingSelectedState();
            if (!this.isStock()) {
              this.$emit("getPrice", "库存不足");
            }
          }
        });
      });
    },
    // 点击选中状态,数据库中要有selected_prop_value来做标识
    seletedStatus(pindex, index) {
      this.skuobj.spec_attr_list[pindex].selected_prop_value = index;
    },
    //将所有的选中的状态拼接起来 如this.statusString="黄色,500ml,非转基因压榨"
    splicingSelectedState() {
      this.statusString = "";
      this.skuobj.spec_attr_list.forEach((item, index) => {
        if (index < this.skuobj.spec_attr_list.length - 1) {
          this.statusString += item.spec_val[item.selected_prop_value] + ",";
        } else {
          this.statusString += item.spec_val[item.selected_prop_value];
        }
      });
    },
    //判断是否还有库存
    isStock() {
      // 查找数据中是否有这个sku的商品
      return this.skuobj.sku_list.some(item => {
        if (item.spec_item === this.statusString) {
          this.$emit("getPrice",  parseInt(item.zs_price));
          this.$emit("skuid", item.sku_id);
          this.$emit("statusString", this.statusString);
          return true;
        }
      });
    },
    //点击触发事件
    selectsku(pindex, index) {
      this.seletedStatus(pindex, index);
      this.splicingSelectedState();
      if (!this.isStock()) {
        this.$emit("getPrice", "库存不足");
      }
    }
  },
  props: ["skuobj"]
};
</script>

